<template>
  <div>
    <SearchForm @search="getTableData" @reset="clearSearch">
      <el-col :span="12" :xs="24" style="display: flex">
        <el-form-item :label="$t('APP名称')" style="width: 100%;margin-bottom: 0">
          <el-row :gutter="24" style="margin: 0">
            <el-col :span="11" style="padding: 0" v-show="$permiss[611]">
              <el-select style="width: 100%" :placeholder="$t('请选择APP')" @change="selectProductVersion"
                         v-model="page.productName" clearable>
                <el-option v-for="item in productList" :key="item.productId" :label="item.appName"
                           :value="item.productName"></el-option>
              </el-select>
            </el-col>
            <el-col :span="1" style="text-align: center;padding: 0 10px">
              <div style="line-height: 32px;">-</div>
            </el-col>
            <el-col :span="11" style="padding: 0" v-show="$permiss[610]">
              <el-select style="width: 100%" :placeholder="$t('请选择版本')" v-model="page.version" clearable>
                <el-option v-for="item in productVersion" :key="item" :label="item"
                           :value="item"></el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-form-item>
      </el-col>
      <el-col :span="12" :xs="24">
        <el-form-item :label="$t('日期')">
          <el-date-picker
              v-model="page.timeValue"
              style="width: 100%"
              type="daterange"
              range-separator="~"
              unlink-panels
              value-format="yyyy-MM-dd"
              :start-placeholder="$t('开始时间')"
              :end-placeholder="$t('结束时间')">
          </el-date-picker>
        </el-form-item>
      </el-col>
    </SearchForm>
    <el-card style="margin-top: 10px" shadow="never">
      <Table border :page="page" :loading="loading" max-height='600px' :table-column="tableColumn"
             :table-data="tableData"
             @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange">
        <template slot="time" slot-scope="{row}">
          {{ row.insertTime.substr(0, 10) }}
        </template>
        <template slot="regisApplyRate" slot-scope="{row}">
          <span v-if="!row.registerNum">0%</span>
          <span v-else> {{ parseFloat((row.applyNum / row.registerNum) * 100).toFixed(2) }}%</span>
        </template>
        <template slot-scope="{row}" slot="handle">
          <el-button type="text" @click="lookDetails(row)" v-show="$permiss[613]">{{ $t('详情') }}</el-button>
        </template>
      </Table>
    </el-card>
    <Dialog :title="visible.title" :visible.sync="visible.isShow" :footer="false"
            width="80%" @close="visibleClear">
      <el-form label-width="80px">
        <el-row :gutter="24">
          <el-col :span="8" :xs="24">
            <el-form-item :label="$t('日期')">
              <el-date-picker
                  v-model="form.timeValue"
                  style="width: 100%"
                  type="daterange"
                  range-separator="~"
                  unlink-panels
                  value-format="yyyy-MM-dd"
                  :start-placeholder="$t('开始时间')"
                  :end-placeholder="$t('结束时间')">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24" style="padding: 0;">
            <el-button type="primary" @click="fetchDetailsList">{{ $t('查询') }}</el-button>
            <!--            <el-button @click="resetForm">{{ $t('重置') }}</el-button>-->
          </el-col>
        </el-row>
      </el-form>
      <div style="margin-bottom: 15px">
        <h3 style="margin: 10px 0">{{ $t('登录') }}</h3>
        <Table :page="false" border :table-data="detailsData">
          <el-table-column align="center" :label="$t('获取验证码')" prop="codeNum"></el-table-column>
          <el-table-column align="center" :label="$t('登录')" prop="loginNum"></el-table-column>
          <el-table-column align="center" :label="$t('输入新密码')" prop="newPasswordNum"></el-table-column>
          <el-table-column align="center" :label="$t('输入确认密码')" prop="confirmNum"></el-table-column>
          <el-table-column align="center" :label="$t('提交密码')" prop="submitPasswordNum"></el-table-column>
        </Table>
      </div>

      <div style="margin-bottom: 15px">
        <h3 style="margin: 10px 0">{{ $t('身份认证') }}</h3>
        <Table :page="false" border :table-data="detailsData">
          <el-table-column align="center" :label="$t('输入身份证号')" prop="cardNum" min-width="150"></el-table-column>
          <el-table-column align="center" :label="$t('输入姓名')" prop="nameNum"></el-table-column>
          <el-table-column align="center" :label="$t('父姓')" v-if="isMxg" prop="newPasswordNum"></el-table-column>
          <el-table-column align="center" :label="$t('母姓')" v-if="isMxg" prop="confirmNum"></el-table-column>
          <el-table-column align="center" :label="$t('输入性别')" prop="genderNum"></el-table-column>
          <el-table-column align="center" :label="$t('输入生日')" prop="birthNum"></el-table-column>
          <el-table-column align="center" :label="$t('选民编号')" v-if="isMxg" prop="votersNum"></el-table-column>
          <el-table-column align="center" :label="$t('上传正面身份证')" prop="upFrontNum" min-width="150"></el-table-column>
          <el-table-column align="center" :label="$t('上传反面身份证')" prop="upBackNum" min-width="150"></el-table-column>
          <el-table-column align="center" :label="$t('上传手持身份证')" prop="upHandNum" min-width="150"></el-table-column>
          <el-table-column align="center" :label="$t('提交身份认证')" prop="submitIdentityNum"
                           min-width="150"></el-table-column>
        </Table>
      </div>

      <div style="margin-bottom: 15px">
        <h3 style="margin: 10px 0">{{ $t('个人信息') }}</h3>
        <Table :page="false" border :table-data="detailsData">
          <el-table-column align="center" :label="$t('选择贷款用途')" prop="chooseTypeNum" min-width="150"></el-table-column>
          <el-table-column align="center" :label="$t('选择居住区域')" prop="chooseAddressNum"
                           min-width="150"></el-table-column>
          <el-table-column align="center" :label="$t('输入详细地址')" prop="detailedAddressNum"
                           min-width="150"></el-table-column>
          <el-table-column align="center" :label="$t('选择婚姻状况')" prop="marriedNum" min-width="150"></el-table-column>
          <el-table-column align="center" :label="$t('选择子女个数')" prop="childNum" min-width="150"></el-table-column>
          <el-table-column align="center" :label="$t('选择学历')" prop="educationNum"></el-table-column>
          <el-table-column align="center" :label="$t('输入邮箱')" prop="mailNum"></el-table-column>
          <el-table-column align="center" :label="$t('输入whatsApp')" v-if="isMxg" prop="submitPasswordNum"
                           min-width="150"></el-table-column>
          <el-table-column align="center" :label="$t('输入Zalo')" v-if="!isMxg" prop="zaloNum"
                           min-width="150"></el-table-column>
          <el-table-column align="center" :label="$t('输入facebook')" prop="facebookNum"
                           min-width="150"></el-table-column>
          <el-table-column align="center" :label="$t('提交个人信息')" prop="submitInfoNum" min-width="150"></el-table-column>
        </Table>
      </div>
      <div style="margin-bottom: 15px">
        <h3 style="margin: 10px 0">{{ $t('工作信息') }}</h3>
        <Table :page="false" border :table-data="detailsData">
          <el-table-column align="center" :label="$t('输入公司名称')" prop="companyNum" min-width="150"></el-table-column>
          <el-table-column align="center" :label="$t('选择行业类型')" prop="businessTypeNum"
                           min-width="150"></el-table-column>
          <el-table-column align="center" :label="$t('输入公司电话')" prop="phoneNum" min-width="150"></el-table-column>
          <el-table-column align="center" :label="$t('输入详细地址')" prop="companyAddressNum"
                           min-width="150"></el-table-column>
          <el-table-column align="center" :label="$t('选择在职时长')" prop="workTimeNum" min-width="150"></el-table-column>
          <el-table-column align="center" :label="$t('选择身份')" prop="positionNum"></el-table-column>
          <el-table-column align="center" :label="$t('输入每月净收入')" prop="incomeNum" min-width="150"></el-table-column>
          <el-table-column align="center" :label="$t('选择发薪日')" prop="payDayNum" min-width="150"></el-table-column>
          <el-table-column align="center" :label="$t('发薪频率')" v-if="isMxg" prop="submitPasswordNum"></el-table-column>
          <el-table-column align="center" :label="$t('第一个发薪日')" v-if="isMxg" prop="onePayNum"
                           min-width="150"></el-table-column>
          <el-table-column align="center" :label="$t('第二个发薪日')" v-if="isMxg" prop="twoPayNum"
                           min-width="150"></el-table-column>
          <el-table-column align="center" :label="$t('第三个发薪日')" v-if="isMxg" prop="threePayNum"
                           min-width="150"></el-table-column>
          <el-table-column align="center" :label="$t('第四个发薪日')" v-if="isMxg" prop="fourPayNum"
                           min-width="150"></el-table-column>
          <el-table-column align="center" :label="$t('上传工作资料')" prop="upWorkNum" min-width="150"></el-table-column>
          <el-table-column align="center" :label="$t('提交工作信息')" prop="submitWorkNum" min-width="150"></el-table-column>
        </Table>
      </div>

      <div style="margin-bottom: 15px">
        <h3 style="margin: 10px 0">{{ $t('紧急联系人') }}</h3>
        <Table :page="false" border :table-data="detailsData">
          <el-table-column align="center" :label="$t('选择紧急联系人1')" prop="chooseOneNum"></el-table-column>
          <el-table-column align="center" :label="$t('选择联系人1与我的关系')" prop="oneRelationNum"></el-table-column>
          <el-table-column align="center" :label="$t('选择紧急联系人关系2')" prop="chooseTwoNum"></el-table-column>
          <el-table-column align="center" :label="$t('选择联系人2与我的关系')" prop="twoRelationNum"></el-table-column>
          <el-table-column align="center" :label="$t('提交紧急联系人')" prop="submitManNum"></el-table-column>
        </Table>
      </div>

      <div style="margin-bottom: 15px" v-if="!isMxg">
        <h3 style="margin: 10px 0">{{ $t('运营商认证') }}</h3>
        <Table :page="false" border :table-data="detailsData">
          <el-table-column align="center" :label="$t('选择运营商')" prop="chooseOperatorNum"></el-table-column>
          <el-table-column align="center" :label="$t('发送验证码')" prop="sendCodeNum"></el-table-column>
          <el-table-column align="center" :label="$t('再次发送验证码')" prop="codeAgainNum"></el-table-column>
          <el-table-column align="center" :label="$t('确认运营商授权')" prop="submitOperatorNum"></el-table-column>
          <el-table-column align="center" :label="$t('运营商认证成功')" prop="completeOperatorNum"></el-table-column>
        </Table>
      </div>
      <div style="margin-bottom: 15px">
        <h3 style="margin: 10px 0">{{ $t('银行卡认证') }}</h3>
        <Table :page="false" border :table-data="detailsData">
          <el-table-column align="center" :label="$t('选择收款银行')" prop="chooseBankNum"></el-table-column>
          <el-table-column align="center" :label="$t('输入银行账号')" prop="bankCodeNum"></el-table-column>
          <el-table-column align="center" :label="$t('选择银行所在省')" prop="chooseProvinceNum"></el-table-column>
          <el-table-column align="center" :label="$t('输入支行名称')" prop="bankNameNum"></el-table-column>
          <el-table-column align="center" :label="$t('提交银行账号')" prop="submitBankNum"></el-table-column>
        </Table>
      </div>

      <div style="margin-bottom: 15px" v-if="isMxg">
        <h3 style="margin: 10px 0">{{ $t('税卡信息') }}</h3>
        <Table :page="false" border :table-data="detailsData">
          <el-table-column align="center" :label="$t('输入税号')" prop="codeNum"></el-table-column>
          <el-table-column align="center" :label="$t('姓名')" prop="loginNum"></el-table-column>
          <el-table-column align="center" :label="$t('税卡验证编码')" prop="newPasswordNum"></el-table-column>
        </Table>
      </div>

      <div>
        <h3 style="margin: 10px 0">{{ $t('提交补充信息') }}</h3>
        <Table :page="false" border :table-data="detailsData">
          <el-table-column align="center" :label="$t('上传最新收入证明')" prop="upIncomeProofNum"></el-table-column>
          <el-table-column align="center" :label="$t('上传最新消费账单')" prop="upConsumerNum"></el-table-column>
        </Table>
      </div>
    </Dialog>
  </div>
</template>

<script>
import {defaultTimeDate, dateFormatSection} from "@/utils/tools";
import VeFunnel from 'v-charts/lib/funnel.common'
import {selectVersion, userReportDetails, userReportList} from '@/api/user'
import {selectProduct,} from "@/api/system";
import dayjs from "dayjs";

export default {
  components: {
    [VeFunnel.name]: VeFunnel
  },
  name: 'userChange',
  data() {
    return {
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        timeValue: defaultTimeDate(14)
      },
      loading: false,
      tableData: [],
      tableColumn: [
        {label: this.$t('APP名称'), prop: 'productName', width: 150, fixed: 'left'},
        {label: this.$t('日期'), prop: 'insertTime', slot: 'time', width: 150, fixed: 'left'},
        {label: this.$t('版本号'), prop: 'version', width: 150, fixed: 'left'},
        {label: this.$t('安装数'), prop: 'installNum', width: 150},
        {label: this.$t('获取验证码'), prop: 'codeNum', width: 150},
        {label: this.$t('注册数'), prop: 'registerNum', width: 150},
        {label: this.$t('身份认证'), prop: 'submitIdentityNum', width: 150},
        {label: this.$t('个人信息'), prop: 'submitInfoNum', width: 150},
        {label: this.$t('工作信息'), prop: 'submitWorkNum', width: 150},
        {label: this.$t('紧急联系人'), prop: 'submitManNum', width: 150},
        {label: this.$t('运营商认证成功'), prop: 'submitOperatorNum', width: 150},
        {label: this.$t('银行卡认证'), prop: 'submitBankNum', width: 150},
        {label: this.$t('税卡信息'), prop: 'rfcNum', width: 150},
        {label: this.$t('提交补充信息'), prop: 'submitReplenishNum', width: 150},
        {label: this.$t('申请数'), prop: 'applyNum', width: 150},
        {label: this.$t('注册申请率'), slot: 'regisApplyRate', width: 150},
        {label: this.$t('操作'), fixed: 'right', width: 150, slot: 'handle', isHide: !this.$permiss[613]},
      ],
      productList: [],
      productVersion: [],
      tableRows: {},
      form: {
        timeValue: null
      },
      visible: {
        isShow: false,
        type: ''
      },
      detailsData: [],
      visibleDetails: false,
      visibleProductVersion: []
    }
  },
  computed: {
    isMxg() {
      return process.env.VUE_APP_REGION === 'moxige'
    }
  },
  mounted() {
    this.getSelect()
    this.getTableData()
  },
  methods: {
    async getTableData() {
      this.loading = true
      const timeValue = dateFormatSection(this.page.timeValue)
      const params = Object.assign({}, this.page, {
        timeStart: timeValue && timeValue.length > 1 ? timeValue[0] : undefined,
        timeEnd: timeValue && timeValue.length > 1 ? timeValue[1] : undefined,
      })
      // 删除日期属性
      delete params.timeValue
      const res = await userReportList(params)
      if (res.code === 1) {
        const {list, total} = res.data
        this.tableData = list
        this.loading = false
        this.page = Object.assign({}, this.page, {
          total: total,
        })
      }
    },
    handleCurrentChange(val) {
      this.page.pageNum = val
      this.getTableData()
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getTableData()
    },
    async getSelect() {
      selectProduct().then(res => {
        this.productList = res.data
      })
    },
    clearSearch() {
      this.page = {
        pageNum: 1,
        pageSize: 10,
        total: 0
      }
      this.productVersion = []
      this.getTableData()
    },
    async selectProductVersion(value) {
      if (value) {
        selectVersion({
          productName: value
        }).then(res => {
          this.productVersion = res.data
        })
      } else {
        this.productVersion = []
        this.page.appVersion = null
      }
    },
    // 获取详情数据
    async fetchDetailsList() {
      const [timeStart, timeEnd] = dateFormatSection(this.form.timeValue)
      const params = {
        timeStart, timeEnd,
        productName: this.form.productName,
        version: this.form.version,
      }
      const res = await userReportDetails(params)
      if (res.code === 1) {
        this.detailsData = res.data ? [res.data] : []
      }
    },
    resetForm() {
      this.form = {}
      this.fetchDetailsList()
    },
    // 排序
    sort(arr, type) {
      for (let i = 0; i < arr.length - 1; i++) {
        for (let j = 0; j < arr.length - i - 1; j++) {
          if (arr[j][type] > arr[j + 1][type]) {
            var hand = arr[j][type];
            arr[j][type] = arr[j + 1][type];
            arr[j + 1][type] = hand;
          }
        }
      }
      return arr;
    },
    visibleClear() {
      this.form = {
        timeValue: null
      }
    },
    async lookDetails(row) {
      this.form = {
        productName: row.productName,
        version: row.version,
        ...this.form
      }
      this.form.timeValue = [dayjs(row.insertTime).format('YYYY-MM-DD'), dayjs(row.insertTime).format('YYYY-MM-DD')]
      await this.fetchDetailsList()
      this.visible.isShow = true
      this.visible.title = row.productName + ' ' + 'v' + row.version + this.$t('详情')
    }
  }
}
</script>

<style scoped>

</style>
